<template>
  <!--合同管理-->

  <div>
    <div>




      <el-tabs type="border-card" class="demo-tabs">
        <el-tab-pane label="新员工待签署">


      <el-row style="background: white">
        <el-col :span="24"><div class="tbUpDiv"><img src="src/public/imgs/36)0DHOK%25J39%25~%25H9%5DTFO%60I.png" class="tbImg"><span class="tbUpPost">新员工待签
        </span><div class="aaa">

          <div class="tbScenDdiv">
            <el-button class="tbFirstBu" @click="hidddiv=!hidddiv">高级搜索</el-button>
          </div>
        </div></div></el-col>
      </el-row>

      <el-row>
        <el-col>


          <div class="tbhide">

            <div class="tbScenDiva" v-if="hidddiv">

              <div style="border-bottom:1px solid gainsboro;height: 40px"><span style="font-size: 10px;margin-left:30px;line-height: 40px">提示信息！</span></div>

              <div style="font-size: 10px;">

                <div style="display: flex; justify-content: space-around;height: 60px">
                  <div><span >为了体验员工签署，请输入体验者真实姓名与手机号码用于个人认证</span>
                  </div>

                </div>

                <div style="display: flex; justify-content: space-around;height: 60px">

                  <div><span>体验者姓名:：</span>    <input style="height: 30px;width: 300px"/></div>
                </div>

                <div style="display: flex; justify-content: space-around;height: 60px">
                  <div><span>体验者手机：</span>    <input style="height: 30px;width: 300px"/></div>

                </div>


              </div>
              <div style="border-top: 1px solid gainsboro;height: 50px">

                <el-button style="margin-left:800px;margin-top: 10px">发起合同</el-button>
                <el-button style="margin-left:10px;margin-top: 10px" @click="hidddiv=false">关闭</el-button>
              </div>
            </div>
          </div>


        </el-col>
      </el-row>






      <el-tabs type="border-card" class="demo-tabs">
        <el-tab-pane label="全部" >
          <div class="picture" data-v-309cad06="">

            <div class="typeface" data-v-309cad06="">
              <el-row>
                <el-col>
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="booksId" type="selection" width="60"/>
                    <el-table-column prop="name" label="姓名" width="180" />
                    <el-table-column prop="sex" label="岗位" width="180" />
                    <el-table-column prop="address" label="手机号码" width="180" />
                    <el-table-column prop="where" label="邮箱" width="180" />
                    <el-table-column prop="steta" label="计划入职日期" width="180" />
                    <el-table-column prop="timet" label="实际入职日期" width="180" />
                    <el-table-column prop="ddzt" label="签署状态" width="180" />
                  </el-table>
                </el-col>
              </el-row>
            </div></div>
        </el-tab-pane>

        <el-tab-pane label="签署中">签署中</el-tab-pane>
        <el-tab-pane label="未签署">未签署</el-tab-pane>
      </el-tabs>

        </el-tab-pane>




        <el-tab-pane label="老员工合同">


          <el-row style="background: white">
            <el-col :span="24"><div class="tbUpDiv"><img src="src/public/imgs/36)0DHOK%25J39%25~%25H9%5DTFO%60I.png" class="tbImg"><span class="tbUpPost">人员合同
        </span><div class="aaa">

              <div class="tbScenDdiv">
                <el-button class="tbFirstBu" @click="hidddiv=!hidddiv">高级搜索</el-button>
              </div>
            </div></div></el-col>
          </el-row>

          <el-row>
            <el-col>


              <div class="tbhide">

                <div class="tbScenDiva" v-if="hidddiv">

                  <div style="border-bottom:1px solid gainsboro;height: 40px"><span style="font-size: 10px;margin-left:30px;line-height: 40px">提示信息！</span></div>

                  <div style="font-size: 10px;">

                    <div style="display: flex; justify-content: space-around;height: 60px">
                      <div><span >为了体验员工签署，请输入体验者真实姓名与手机号码用于个人认证</span>
                      </div>

                    </div>

                    <div style="display: flex; justify-content: space-around;height: 60px">

                      <div><span>体验者姓名:：</span>    <input style="height: 30px;width: 300px"/></div>
                    </div>

                    <div style="display: flex; justify-content: space-around;height: 60px">
                      <div><span>体验者手机：</span>    <input style="height: 30px;width: 300px"/></div>

                    </div>


                  </div>
                  <div style="border-top: 1px solid gainsboro;height: 50px">

                    <el-button style="margin-left:800px;margin-top: 10px">发起合同</el-button>
                    <el-button style="margin-left:10px;margin-top: 10px" @click="hidddiv=false">关闭</el-button>
                  </div>
                </div>
              </div>


            </el-col>
          </el-row>











          <el-tabs type="border-card" class="demo-tabs">
            <el-tab-pane label="全部" >
              <div class="picture" data-v-309cad06="">

                <div class="typeface" data-v-309cad06="">
                  <el-row>
                    <el-col>
                      <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="booksId" type="selection" width="60"/>
                        <el-table-column prop="name" label="人员姓名" width="180" />
                        <el-table-column prop="sex" label="所属岗位" width="180" />
                        <el-table-column prop="address" label="合同开始日期" width="180" />
                        <el-table-column prop="where" label="合同结束日期" width="180" />
                        <el-table-column prop="steta" label="到期提醒" width="180" />
                      </el-table>
                    </el-col>
                  </el-row>
                </div></div>
            </el-tab-pane>

            <el-tab-pane label="签署中">签署中</el-tab-pane>
            <el-tab-pane label="已签署">已签署</el-tab-pane>
            <el-tab-pane label="未签署">未签署</el-tab-pane>
          </el-tabs>





        </el-tab-pane>


      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref, toRefs} from "vue";


const hidddiv=ref(false)
const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
});
const tableData = [
  {
    name: ' CLSQ2020010011',
    steta:'-',
    sex:'2022-10-01',
    where:'日本',
    address: '香港',
    timet:'1011',
    ddzt:'审批中',
  },
  {
    name: ' CLSQ2020010011',
    steta:'-',
    sex:'2022-09-03',
    where:'深圳',
    address: '厦门',
    timet:'2012',
    ddzt:'审批中',
  },
  {
    name: ' CLSQ2020010011',
    steta:'-',
    sex:'2022-09-02',
    where:'厦门',
    address: '长沙',
    timet:'1008',
    ddzt:'审批中',
  },
  {
    name: ' CLSQ2020010011',
    steta:'-',
    sex:'2022-08-20',
    where:'北京',
    address: '岳阳',
    timet:'2028',
    ddzt:'审批中',
  },
  {
    name: ' CLSQ2020010011',
    steta:'-',
    sex:'2022-08-15',
    where:'上海',
    address: '汕头',
    timet:'2008',
    ddzt:'审批中',
  }
]
const {total,pageNo,pageSize} = toRefs(d);
</script>

<style scoped>
.tbUpDiv{
  width: 100%;
  border-top: 2px solid gainsboro;
  border-bottom: 1px solid gainsboro;

  position: relative;
}
.tbImg{
  margin-left: 30px;
  margin-top: 15px;
}
.tbUpPost{
  position: relative;
  top: -19px;
  left: 20px;
}
.aaa{
  display:flex;
}
.tj{
  display:flex;
  margin: 5px 10px;
}
.tbScenBipt{
  width: 160px;
}

.tjj{
  margin:10px 20px;
}
.tbScenAipt{
  width: 150px;
  height: 30px;
  border: 1px solid black;
}
.tbScenDdiv{
  /*position: relative;*/
  /*left: 660px;*/
  /*top: -98px;*/
  font-size: 14px;
  /*width: 400px;*/

}
.tbFirstBu{
  height: 36px;
  /*margin-left: 100px;*/
  /*margin-top: -54px;*/
}

</style>